<template>
  <div class="div1">
    <h2>父组件</h2>
    <span>{{ money }}</span>
    <p>
      <TongXin7Child1 />
    </p>

  </div>
</template>
<script setup lang="ts">
import { ref, provide, reactive } from 'vue';
import TongXin7Child1 from './TongXin7Child1.vue';

let money = ref(100)
let car = reactive({
  name: '奔驰',
  price: 1000000
})

const updateMoney = (value: number) => {
  money.value -= value
}
provide('moneyContext', {money, updateMoney})
provide('carContext', {car})


</script>
<style lang="scss" scoped>
.div1 {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #eee;
}
</style>
